<template>
  <main>
    <div class="background-box">
      <img
        src="../../assets/images/01首页_slices/logowangji.png"
        alt=""
        class="logo"
      />
      <div class="form">
        <el-link type="info" :underline="false">找回密码</el-link>
        <el-form
          :label-position="labelPosition"
          :model="formLabelAlign"
          style="max-width: 460px"
          :rules="rules"
          ref="ruleFormRef"
        >
          <el-form-item prop="tel">
            <el-input
              v-model="formLabelAlign.tel"
              placeholder="请输入注册手机号"
              type="text"
            >
              <template #prefix>
                <img
                  src=".././../assets/images/02忘记密码_slices/icon03.png"
                  alt=""
                />
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="formLabelAlign.region" style="width: 280px">
              <template #prefix>
                <img
                  src=".././../assets/images/02忘记密码_slices/icon04.png"
                  alt=""
                />
              </template>
            </el-input>
            <span class="random" @click="random">
              <img
                src="../../assets/images/02忘记密码_slices/59x9.png"
                alt=""
              />
              <div class="random-num">{{ randomNum }}</div>
            </span>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="formLabelAlign.yzm"
              style="width: 280px"
              placeholder="请输入短信验证码"
            >
              <template #prefix>
                <img
                  src=".././../assets/images/02忘记密码_slices/icon04.png"
                  alt=""
                />
              </template>
            </el-input>
            <span>
              <el-button type="success">获取验证码</el-button>
            </span>
          </el-form-item>
          <el-form-item prop="newpass">
            <el-input
              v-model="formLabelAlign.newpass"
              placeholder="请输入新密码"
            >
              <template #prefix>
                <img
                  src=".././../assets/images/02忘记密码_slices/icon05.png"
                  alt=""
                />
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="pass">
            <el-input v-model="formLabelAlign.pass" placeholder="请确定新密码">
              <template #prefix>
                <img
                  src=".././../assets/images/02忘记密码_slices/矢量智能对象.png"
                  alt=""
                />
              </template>
            </el-input>
          </el-form-item>
          <el-button type="success" class="btn" @click="submitForm(ruleFormRef)"
            >找回密码</el-button
          >
        </el-form>
      </div>
    </div>
  </main>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { useRouter } from "vue-router";

export default defineComponent({
  setup() {
    const labelPosition = ref<string>("left");
    const router = useRouter();
    const img = "../../assets/images/02忘记密码_slices/icon.png";
    let randomNum = ref<string>(Code(1, 10));

    const formLabelAlign = reactive({
      tel: "",
      region: "",
      type: "",
      yzm: "",
      newpass: "",
      pass: "",
    });

    // 点击切换随机数
    const random = () => {
      randomNum.value = Code(1, 10);
    };

    const ruleFormRef = ref<FormInstance>();
    const rules = reactive<FormRules>({
      tel: [
        {
          required: true,
          message: "请输入11位手机号",
        },
        {
          trigger: "blur",
          validator: (rule, value, callback) => {
            const passwordreg =
              /^(((13[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[3-8]{1})|(18[0-9]{1})|(19[0-9]{1})|(14[5-7]{1}))+\d{8})$/;
            if (!passwordreg.test(value)) {
              callback(new Error("请输入正确的手机号码哦!"));
            } else {
              callback();
            }
          },
        },
      ],
      newpass: [
        { required: true, message: "请输入密码", trigger: "change" },
        { min: 8, message: "密码最少8位数哦", trigger: "blur" },
        {
          trigger: "blur",
          validator: (rule, value, callback) => {
            console.log(formLabelAlign.newpass);

            const passwordreg =
              /(?![A-Z]*$)(?![a-z]*$)(?![0-9]*$)(?![^a-zA-Z0-9]*$)/;
            if (!passwordreg.test(value)) {
              callback(
                new Error(
                  "密码必须由大写字母、小写字母、数字、特殊符号中的2种及以上类型组成!"
                )
              );
            } else {
              callback();
            }
          },
        },
      ],
      pass: [
        { required: true, message: "请再次确认密码", trigger: "change" },
        {
          trigger: "blur",
          validator: (rule, value, callback) => {
            console.log(formLabelAlign.pass);

            if (formLabelAlign.pass !== formLabelAlign.newpass) {
              callback(new Error("密码必须一致!"));
            } else {
              callback();
            }
          },
        },
      ],
    });

    //按钮
    const submitForm = (formEl: FormInstance | undefined) => {
      if (!formEl) return;
      formEl.validate((valid) => {
        if (valid) {
          // console.log("submit!");
          router.push("/login");
        } else {
          console.log("error submit!");
          return false;
        }
      });
    };
    return {
      labelPosition,
      formLabelAlign,
      img,
      randomNum,
      rules,
      ruleFormRef,
      submitForm,
      random,
    };
  },
});

function random(max: any, min: any) {
  if (min > max) {
    let t = min;
    min = max;
    max = t;
  }
  return parseInt(Math.random() * (max - min + 1) + min);
}

function Code(min: number, max: number): string {
  var code = "";
  for (var i = 0; i < 4; i++) {
    switch (random(1, 3)) {
      //ASCII码转换
      case 1:
        min = 48;
        max = 57;
        break;
      case 2:
        min = 65;
        max = 90;
        break;
      case 3:
        min = 97;
        max = 122;
        break;
    }
    var randomsz = random(min, max);
    code += String.fromCharCode(randomsz);
  }
  return code;
}
</script>

<style lang="less" scoped>
main {
  background: #ccdeb6;
  min-height: 100vh;
  min-width: 100vw;
  display: flex;
  .background-box {
    background: url("../../assets/images/02忘记密码_slices/矩形背景01.png");
    min-width: 1000px;
    min-height: 550px;
    margin: auto;
    position: relative;
    .logo {
      width: 234.9px;
      height: 219.5px;
      position: absolute;
      top: 25%;
      left: 10%;
    }
    .form {
      width: 400px;
      height: 400px;
      position: absolute;
      right: 10%;
      top: 20%;
      /deep/.el-link__inner {
        font-size: 20px;
        padding-bottom: 20px;
      }
      .el-input {
        height: 40px;
        margin-right: 10px;
      }
      /deep/.el-form-item__content {
        line-height: 0px;
        .random {
          position: relative;
          .random-num {
            position: absolute;
            top: 20px;
            left: 30px;
            font-weight: 800;
            color: #666666;
          }
        }
      }
      .el-button--success {
        height: 40px;
      }
      .btn {
        width: 400px;
      }
    }
  }
}
</style>
